import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  customTab: {
    width: "470px",
    height: "189px",
    display: "flex",
    background: "#FFFFFF",
    boxShadow: "0px 2px 8px 0px rgba(0, 0, 0, 0.15)",
    borderRadius: "4px",
  },
  tabHead: {
    display: "flex",
    flexDirection: "column",
    gap: 14,
    padding: "13px 13px 13px 16px",
    borderRight: "1px solid rgba(0, 0, 0, 0.09)",
  },
  tabContent: {
    flex: 1,
    margin: "7px 16px 12px 16px",
    "& .ct0-timeRange-trigger": {
      minWidth: "307px",
    },
    "& .ct0-timeRange-text": {
      padding: "0 !important",
    },
  },
  tab: {
    display: "inline-block",
    cursor: "pointer",
  },
  active: {
    color: "#037AFF !important",
  },
  trigger: {
    height: "24px",
    padding: "0 10px",
    fontSize: "12px",
    borderRadius: "4px",
    background: "#f5f5f5",
    display: "inline-flex",
    alignItems: "center",
    gap: "10px",
    cursor: "pointer",
  },
  disabled: {
    cursor: "not-allowed",
    opacity: 0.5,
  },
});

export { useStyles };
